<page-header></page-header>

<div class="m-b-16">
  The following example uses
  <a href="https://ng-matero.github.io/extensions/select" target="_blank">
    <code>mtx-select</code></a> component of
  <a href="https://ng-matero.github.io/extensions/" target="_blank">Material Extensions
  </a>, it is a Material form field wrapper of <code>ng-select</code>.
</div>

<div fxLayout="row wrap" class="matero-row">
  <div fxFlex="100" fxFlex.gt-sm="50" class="matero-col">
    <mat-card>
      <mat-card-title>Data Source</mat-card-title>
      <div>
        <p>
          Most common case is showing data from backend
          API and with mtx-select this is extremely simple since you can bind directly to
          observable when using angular <b> | async</b> pipe
        </p>
        <mat-form-field class="w-full">
          <mat-label>select person</mat-label>
          <mtx-select [items]="people$ | async" bindLabel="name" bindValue="id" autofocus
                      [(ngModel)]="selectedPersonId">
          </mtx-select>
        </mat-form-field>
        Selected: {{selectedPersonId}}
        <mat-divider class="m-y-16" inset></mat-divider>

        <p>
          You can also set array of objects as items input
        </p>
        <mat-form-field class="w-full">
          <mat-label>select person</mat-label>
          <mtx-select [items]="people" bindLabel="name" bindValue="id"
                      [(ngModel)]="selectedPersonId2">
          </mtx-select>
        </mat-form-field>
        Selected: {{selectedPersonId2}}
        <mat-divider class="m-y-16" inset></mat-divider>

        <p>
          While array of objects is the most common items source, you may want to set simple array
          of strings,
          numbers, booleans
        </p>
        <mat-form-field class="w-full">
          <mat-label>select person</mat-label>
          <mtx-select [items]="simpleItems" [(ngModel)]="selectedSimpleItem">
          </mtx-select>
        </mat-form-field>
        Selected: {{selectedSimpleItem | json}}
        <mat-divider class="m-y-16" inset></mat-divider>

        <p>
          If you have simple use case, you can omit items array and bind options directly in html
          using
          <b>ng-option</b> component.
        </p>
        <button type="button" mat-raised-button color="primary" (click)="toggleDisabled()"
                class="m-b-8">
          Toggle option[1] disabled
        </button>

        <mat-form-field class="w-full">
          <mat-label>Select car</mat-label>
          <mtx-select [(ngModel)]="selectedCarId">
            <mtx-option *ngFor="let car of cars" [value]="car.id" [disabled]="car.disabled">
              {{car.name}}
            </mtx-option>
            <mtx-option [value]="'custom'">Custom</mtx-option>
          </mtx-select>
        </mat-form-field>

        Selected car ID: {{selectedCarId | json}}
      </div>
    </mat-card>
  </div>

  <div fxFlex="100" fxFlex.gt-sm="50" class="matero-col">
    <mat-card>
      <mat-card-title>Tags</mat-card-title>
      <div>
        <label>Default tags</label>
        <mat-form-field class="w-full">
          <mat-label>Select item</mat-label>
          <mtx-select [items]="[]" [addTag]="true" [(ngModel)]="selectedCompany">
          </mtx-select>
        </mat-form-field>

        <p>
          Selected value: {{selectedCompany | json}}
        </p>
        <mat-divider class="m-y-16" inset></mat-divider>

        <label>Custom tags</label>
        <mat-form-field class="w-full">
          <mat-label>Select item</mat-label>
          <mtx-select [items]="companies" [addTag]="addTag" [hideSelected]="true" multiple="true"
                      bindLabel="name" [(ngModel)]="selectedCompanyCustom">
          </mtx-select>
        </mat-form-field>

        <p>
          Selected value: {{selectedCompanyCustom | json}}
        </p>

        <mat-divider class="m-y-16" inset></mat-divider>

        <label>Server side tags</label>
        <mat-form-field class="w-full">
          <mat-label>Select item</mat-label>
          <mtx-select [items]="companies" [addTag]="addTagPromise" multiple="true" bindLabel="name"
                      [loading]="loading" [(ngModel)]="selectedCompanyCustomPromise">

            <ng-template ng-tag-tmp let-search="searchTerm">
              <b>create new</b>: {{search}}
            </ng-template>
          </mtx-select>
        </mat-form-field>

        <mat-divider class="m-y-16" inset></mat-divider>

        <label>Tagging without dropdown. Press enter to add item</label>
        <mat-form-field class="w-full">
          <mat-label>Select item</mat-label>
          <mtx-select [items]="[]" [addTag]="true" [multiple]="true" [selectOnTab]="true"
                      [isOpen]="false">
          </mtx-select>
        </mat-form-field>

      </div>
    </mat-card>
  </div>
</div>
